<template>
	<el-sub-menu v-if="menuItem.children && menuItem.children.length" :index="menuItem.name">
		<template #title>
			<el-icon v-if="menuItem.icon">
				<component :is="$clone(menuItem.icon)" />
			</el-icon>
			<span>{{ menuItem.label }}</span>
		</template>
		<MenuItem v-for="(v, k) in menuItem.children" :key="k" :menu-item="$clone(v)" />
	</el-sub-menu>
	<el-menu-item v-else :index="menuItem.name" @click="onClickMenuItem(menuItem.name)">
		<el-icon v-if="menuItem.icon">
			<component :is="menuItem.icon" />
		</el-icon>
		<span>{{ menuItem.label }}</span>
	</el-menu-item>
</template>

<script setup>
	import { ElSubMenu, ElMenuItem, ElIcon } from 'element-plus';
	import { useRouter } from 'vue-router';
	import { $clone } from '@jiess/plus/vue3';
	import { useStore } from '@/store';

	defineProps({
		menuItem: {
			type: Object,
			required: true,
			default: () => ({})
		}
	});

	const router = useRouter();
	const store = useStore();
	const onClickMenuItem = async name => {
		store.setRouteCleanCache(false);
		router.push({ name });
	};
</script>